<template>
    <div class="referCheck-card">
        <header class="referCheck-card-header">
            <h4>{{title}}：</h4>
            <el-popover placement="right"
                        width="300"
                        trigger="click"
                        popper-class="referCheck-card-popo"
                        v-model="show">
                <template slot="reference">
                    <slot name="reference"></slot>
                </template>
                <div v-for="dept in depts"
                     :key="dept.department_id"
                     v-if="dept.members && dept.members.length !== 0"
                     class="referCheck-card-popoMain">
                    <div class="referCheck-card-dept">{{dept.name}}</div>
                    <ul class="referCheck-card-member">
                        <li v-for="member in dept.members"
                            :key="member.id"
                            @click="addMember(member)">
                            <img :src="member.avatar_img" alt="头像">
                            <div>{{member.nice_name}}</div>
                        </li>
                    </ul>
                </div>
            </el-popover>
        </header>
        <div class="referCheck-card-main">
            <imgCard v-for="(item, i) in members"
                     :key="i"
                     :src="item.avatar_img"
                     :name="item.nice_name"
                     :id="item.id"
                     @del="delMember(item)"></imgCard>
        </div>
    </div>
</template>
<script>
import imgCard from '../component/imgCard'

export default {
    name: 'checkCard',
    props: {
        title: String,
        depts: Array,
        members: Array
    },
    components: {
        imgCard
    },
    data() {
        return {
            show: false
        }
    },
    methods: {
        addMember(member) {
            this.show = false
            this.$emit('addMember', member)
        },
        delMember(member) {
            this.$emit('delMember', member)
        }
    }
}
</script>
<style lang='less'>
.referCheck-card {
    &-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .el-button--text,
        .el-button--text:focus,
        .el-button--text:hover,
        .el-button--text:active {
            color: #ffc001;
        }
    }
    &-main {
        display: flex;
        margin-left: 60px;
        flex-wrap: wrap;

        .referCheck-imgCard {
            margin: 5px 10px;
        }
    }

    &-popo {
        max-height: 100vh;
        overflow-y: auto;
    }
    &-popoMain {
        padding: 10px 0;
    }
    &-member {
        li {
            display: flex;
            align-items: center;
            padding: 5px 30px;
            cursor: pointer;

            img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
            }

            div {
                margin-left: 20px;
            }
        }
        li:hover {
            background: #eee;
        }
    }
    &-dept {
        font-size: 12px;
        color: #aaa;
        padding: 10px;
    }
}
</style>
